<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
		<title></title>
		<style>
			body {
			  margin: 0;
			}

			#wrap{
				height: 100vh;
				overflow: hidden;
			}
			ul{
				margin: 0;
				padding: 0;
				list-style: none;
			}
			.banner{
				height: 20vh;
				box-sizing: border-box;
				border: 1px solid #00f;
				overflow: hidden;
			}
			.banner ul{
				width: 400vw;
				height: 100%;
			}
			.banner li{
				height: 100%;
				float: left;
				box-sizing: border-box;
				border-right: 1px solid #fff;
			}
			.banner ul li a{
				display: block;
				width: 100vw;
				height: 100%;
				
				text-align: center;
				font-size: 50px;
				color: #fff;
				background: #232323;
			}

			.list{
				height: 80vh;
				overflow: hidden;
				background: #ccc;
				border: 1px solid #f00;
				box-sizing: border-box;
			}
			.list li{
				font-size: 30px;
				line-height: 40px;
			}
		</style>
		<script src="js/css.js"></script>
	</head>
	<body>
		<div id="wrap">
			<div class="banner">
				<ul>
					<li><a href="#">1</a></li>
					<li><a href="#">2</a></li>
					<li><a href="#">3</a></li>
					<li><a href="#">4</a></li>
				</ul>
			</div>
			<div class="list">
				<ul>
				</ul>
			</div>
		</div>
		<script>
			//生成内容
			const ul=document.querySelector('.list ul');
			for(let i=0;i<30;i++){
				let li=document.createElement('li');
				li.innerHTML=`<a href="#">这是一个很长很长的列表${i}</a>`;
				ul.appendChild(li);
			}

			const swiper=({wrap,dir='y',start,end})=>{
				const scroll=wrap.children[0];	//要滚动的元素
				let startPoint={},	//手指按下的位置
					startEle={},
					distance={},	//移动的距离
					targetEle={},	//元素拖动时候的位置
					isDir={			//用来决定用户现在拖动的方向
						x:false,
						y:false
					},

					curPoint={},	//当前次手指坐标
					lastPoint={},	//上一次的手指坐标

					isFirstMove=true;	//用户是否为第一次滑动
				
				wrap.addEventListener('touchstart',ev=>{
					start&&start.call(wrap,ev);	//按下时的回调函数

					startPoint={
						x:ev.changedTouches[0].pageX,
						y:ev.changedTouches[0].pageY
					};

					//在手指一上来按下的时候就需要更新一下lastPoint的值
					lastPoint={
						x:ev.changedTouches[0].pageX,
						y:ev.changedTouches[0].pageY
					}

					startEle={
						x:css(scroll,'translateX'),
						y:css(scroll,'translateY')
					}
				});

				wrap.addEventListener('touchmove',ev=>{
					//当前移动的坐标需要在这里去更新
					curPoint={
						x:ev.changedTouches[0].pageX,
						y:ev.changedTouches[0].pageY
					}
					if(lastPoint.x==curPoint.x && lastPoint.y==curPoint.y){
						//如果上一次的坐标与这一次的坐标是一样的，说明现在手指并没有移动，那就让下面的代码不能执行，直接return。这种情况可以认为用记是误触
						return;
					}

					distance={	//拖动的距离
						x:ev.changedTouches[0].pageX-startPoint.x,
						y:ev.changedTouches[0].pageY-startPoint.y
					};
					targetEle={
						x:startEle.x+distance.x,
						y:startEle.y+distance.y
					};

					if(isFirstMove){	//先要判断用户是否为第一次拖动
						if(Math.abs(distance.x)>Math.abs(distance.y)){
							//左右的方向拖动
							isDir.x=true;
							isDir.y=isFirstMove=false;
						}else{
							//上下的方向拖动
							isDir.y=true;
							isDir.x=isFirstMove=false;
						}
					}


					if(isDir[dir]){	//根据方向的布尔值去设置移动
						css(scroll,{['translate'+dir.toUpperCase()]:targetEle[dir]});
						ev.preventDefault();
					}
					
					//ev.preventDefault();

					//在最后的时候需要把上一次的坐标更新成当前次的坐标
					lastPoint.x=curPoint.x;
					lastPoint.y=curPoint.y;
				});

				wrap.addEventListener('touchend',ev=>{
					end&&end.call(wrap,ev);	//抬起时的回调函数

					isFirstMove=true;
					isDir={
						x:false,
						y:false
					}
				});
			};

			//list
			const list=document.querySelector('.list');
			swiper({
				wrap:list,
			});

			//banner
			const banner=document.querySelector('.banner');
			swiper({
				wrap:banner,
				dir:'x',
			});
		</script>
	</body>
</html>
